{template 'header'}
<link rel="stylesheet" href="../addons/mx_shop/resources/cgc/css/sorder/index.css">
<style>

</style>
<body>


<div class="orders_wrap" v-cloak>
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">设备订单</h1>
    </header>
    <div class="header clearfix">
        <div class="left fl">
            <img src="../addons/mx_shop/resources/cgc/images/shebei.png" alt="">
        </div>
        <div class="right fl">
            <p class="tit ellipsis">{{msg.title}}</p>
            <p class="txt ellipsis">设备品牌：<span>{{msg.brand}}</span></p>
            <p class="txt ellipsis">设备种类：<span>{{msg.cate}}</span></p>
            <p class="txt ellipsis">所在门店：<span>{{msg.store}}</span></p>
        </div>
    </div>

    <div class="tc_list">
        <p class="tit">请选择价格套餐：</p>
        <div class="list_item" v-for="(item,index) in message">
            <div class="left clearfix">
                <div class="mui-checkbox mui-left">
                    <!--<label></label>-->
                    <input name="checkbox" value="Item 2" type="checkbox" @click="changeche(event)">
                </div>
            </div>
            <div class="right" @click="changeinp($event);">
                <div class="let">
                    <!--../addons/mx_shop/resources/cgc/images/yiliao.png-->
                    <img :src="item.thumb!='' ? item.thumb : '../addons/mx_shop/resources/cgc/images/yiliao.png'" alt="">
                    <p class="ellipsis">{{item.title}}</p>
                </div>
                <input type="hidden" :value="item.priceid">
                <div class="rig">
                    <!--<p><span class="pri">￥</span><span class="price">{{item.price}}</span><span> 套餐原价：<i>{{item.marketPrice}}元</i></span></p>
                    <p>服务时间：<span class="time">{{item.minutes}}分钟</span></p>
                    <p>消费后赠送积分：<span class="jf">+{{item.score}}</span></p>-->
                    <p><span class="pri">￥</span><span class="price">{{item.price}}</span></p>
                    <p><span> 套餐原价：<i>{{item.marketPrice}}元</i></span></p>
                    <p>服务时间：<span class="time">{{item.minutes}}分钟</span></p>
                    <p>消费后赠送积分：<span class="jf">+{{item.score}}</span></p>

                </div>
            </div>
            <div class="taocan"><i class="iconfont icon-biaoqian"></i> 套餐{{index+1}}</div>
            <!--套餐mask-->
            <div class="taocan_mask" style="display: none;">
                <div class="cont">
                    <div class="headers">
                        <p class="tit">套餐1</p>
                    </div>
                    <div class="conts">
                        <ul>
                            <!--<span>●</span>-->
                            <li>服务时间：<span>{{item.minutes}}分钟</span> 需支付金额：<i>￥</i><span style="font-size: .265rem;">{{item.price}}</span></li>
                            <li>消费后赠送CGC通用积分：<span>+{{item.score}}</span></li>
                            <!--<li>介绍：威伐光能量，能从人体表面渗透到深层的10cm，由里到外发热, 从而在体内作用，激活细胞运动，促进微血管扩张，促进血液循环顺畅，使气血运行加速，达到促进新陈代谢的目的。</li>-->
                            <li>介绍：{{item.desc}}</li>
                        </ul>
                    </div>
                    <div class="qued" @click="closeMask(event)">确定</div>
                </div>
            </div>
            <!--套餐mask  end-->
        </div>

        <input type="hidden" value="{$token}" id="token">
        <input type="hidden" value="{$_GPC['number']}" id="number">
    </div>

    <div class="btn_wrap">
        <div class="detailbtn" @click="showmask()">设备治疗详情</div>
        <div class="tijiao">提交订单</div>
    </div>

    <!--设备治疗详情-->
    <div class="sb_mask">
        <header class="mui-bar mui-bar-nav">
            <a class="mui-icon mui-icon-left-nav mui-pull-left" @click="closemask()"></a>
            <h1 class="mui-title">设备治疗详情</h1>
        </header>
        <div class="bb">
            <div class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <div class="contents"></div>
                </div>
            </div>
        </div>

    </div>
    <!--设备治疗详情end-->

</div>



<script>

    window.onload=function(){

       /* mui('.mui-scroll-wrapper').scroll(
                options = {
                    scrollY: true, //是否竖向滚动
                    scrollX: false, //是否横向滚动
                    startX: 0, //初始化时滚动至x
                    startY: 0, //初始化时滚动至y
                    indicators: false, //是否显示滚动条
                    deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
                    bounce: true //是否启用回弹
                }
        );*/

        var vm=new Vue({
            el:".orders_wrap" ,
            data:{
                msg:"haode",
                message:"",
                content:""
            },
            methods:{
                scroll:function(){
                    mui('.mui-scroll-wrapper').scroll(
                            options = {
                                scrollY: true, //是否竖向滚动
                                scrollX: false, //是否横向滚动
                                startX: 0, //初始化时滚动至x
                                startY: 0, //初始化时滚动至y
                                indicators: false, //是否显示滚动条
                                deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
                                bounce: true //是否启用回弹
                            }
                    );
                },
                changeinp:function(e){
//                console.log($(e.currentTarget).parent())
                    var input=$(e.currentTarget).parents(".list_item").find('input');
                    var taocan_mask=$(e.currentTarget).siblings(".taocan_mask");

                    if($(input).prop("checked")==false){
                        $(input).prop("checked",true);
                        $(taocan_mask).show();
                        $(input).parents(".list_item").siblings().find("input").prop("checked",false);

                    }else{
                        $(input).prop("checked",false);
                    }
                },
                changeche:function(e){

                    var input=$(e.currentTarget);
                    var taocan_mask=$(e.currentTarget).parents(".left").siblings(".taocan_mask");

                    if($(input).prop("checked")==false){
                        $(input).prop("checked",false);

                    }else{
                        $(input).parents(".list_item").siblings().find("input").prop("checked",false);
                        $(input).prop("checked",true);
                        $(taocan_mask).show();
                    }
                },
                getSGoodsInfo:function(){
                    var token = $("#token").val(),
                            number = $("#number").val();

                    this.$http({
                        method:"POST",
                        url:mainApp.getUrl('sgoods/getSGoodsInfo'),
                        params:{
                            number:number,
                            token:token
                        }
                    }).then(function(msg){
                        if(msg.data.status==1){
                            vm.msg=msg.data.result.data;
                        }else{
                            $.show(msg.data.result.message);
                        }
                    });
                },
                getSGoodsPrices:function(){
                    var token = $("#token").val(),
                            number = $("#number").val();
                    this.$http({
                        method:"POST",
                        url:mainApp.getUrl('sgoods/getSGoodsPrices'),
                        params:{
                            number:number,
                            token:token
                        }
                    }).then(function(msg){
                        if(msg.data.status==1){
//                        alert("成功")
                            vm.message=msg.data.result.data;
                            mainApp.removeloading();
//                        console.log(vm.message)
                        }else{
                            $.show(msg.data.result.message);
                        }
                    });
                },
                closemask:function(){
//                    alert(9)
                    $(".sb_mask").hide();
                },
                showmask:function(){
                    $(".sb_mask").show();
                },
                getContent:function(){
                    var token=$("#token").val(),
                            number=$("#number").val();

                    this.$http({
                        method:"POST",
                        url:mainApp.getUrl('sgoods/getTypeDetail'),
                        params:{token:token,number:number}
                    }).then(function(msg){
                        if(msg.data.status==1){
                            $('.contents').html(msg.data.result.content);
                        }else{
                            $.show(msg.data.result.message);
                        }
                    });
                },
                closeMask:function(e){
                    $(e.currentTarget).parents(".taocan_mask").hide();
                }
            }

        });
        mainApp.showloding();

        vm.getSGoodsPrices();
        vm.getSGoodsInfo();
//    vm.showmask();
        vm.getContent();

        vm.scroll();
    }




</script>
</body>
</html>